<template>
  <div>
    <FormPanel ref="formPanel" :list="topFilterList" :cols="3" :collapse="false" :labelWidth="90" :isSubmitBtn="false" @formChange="searchCustomer"></FormPanel>

    <div style="text-align: right;">
      <el-button type="primary" @click="FormPanelSeacher">搜索</el-button>
      <el-button @click="FormPanelreset">重置</el-button>
    </div>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :dataSource="emptyTableData"
      :datakey="'rows'"
      :isSubmitBtn="false"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      columnsRef="xkkhnewTable"
      selectionType="single"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <div>
        <el-button type="primary" @click="closeDrawer(2)">确定</el-button>
        <el-button @click="closeDrawer(1)">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { customerDetail, customerType } from '@/api/part/partOut/partSales/index';
export default {
  name: 'customers',
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: customerDetail, // 调用接口
      fetchParams: { xhrAbort: true }, // 调用数据
      columns: this.createTablelist(),
      selectedRows: [],
      emptyTableData: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.queryCustomer();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '客户代码',
          fieldName: 'customerCode'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName'
        },
        {
          type: 'SELECT',
          label: '数据来源',
          fieldName: 'oemTag',
          itemList: this.createDictList('1045')
        },
        {
          type: 'SELECT',
          label: '客户类别',
          fieldName: 'customerTypeCode',
          // 查询后台方法
          itemList: []
        }
      ];
    },
    closeDrawer(type) {
      if (type == 1) {
        this.$emit('close2', true);
      } else {
        if (!this.selectedRows.length) {
          return this.$notify({
            title: '提示信息',
            message: '请选择一条数据',
            type: 'warning'
          });
        }
        if (this.selectedRows.some(x => Number(x.COUNT) <= 0)) {
          return this.$notify({
            title: '提示信息',
            message: '请选择一条数据',
            type: 'warning'
          });
        }
        this.$emit('saveDialog', this.selectedRows);
      }
    },
    createTablelist() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户代码',
          dataIndex: 'CUSTOMER_CODE',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{props.row.CUSTOMER_CODE}</span>;
          }
        },
        {
          title: '客户名称',
          dataIndex: 'CUSTOMER_NAME',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          render: props => {
            return <span>{props.row.CUSTOMER_NAME}</span>;
          }
        },
        {
          title: '客户拼音',
          dataIndex: 'CUSTOMER_SPELL',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          render: props => {
            return <span>{props.row.CUSTOMER_SPELL}</span>;
          }
        },
        {
          title: '客户类别',
          dataIndex: 'CUSTOMER_TYPE_NAME',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          render: props => {
            return <span>{props.row.CUSTOMER_TYPE_NAME}</span>;
          }
        },
        {
          title: '加价率',
          dataIndex: 'PRICE_ADD_RATE',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          hidden: true,
          render: props => {
            return <span>{props.row.PRICE_ADD_RATE}</span>;
          }
        },
        {
          title: '销售基价',
          dataIndex: 'SALES_BASE_PRICE_TYPE',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          hidden: true,
          render: props => {
            return <span>{props.row.SALES_BASE_PRICE_TYPE}</span>;
          }
        },
        {
          title: '数据来源',
          dataIndex: 'OEM_TAG',
          filter: true,
          filterType: 'input',
          editType: 'select',
          showOverflowTooltip: true,
          editItems: this.createDictList(1045)
        }
      ];
    },

    // 对后台取出来的值进行转换
    ischange(sql) {
      if (sql == 10041001) {
        return 1;
      } else {
        return 0;
      }
    },
    async queryCustomer() {
      let res = await customerType();
      this.topFilterList.find(item => item.fieldName === 'customerTypeCode').itemList = res.data.map(x => ({ text: x.CUSTOMER_TYPE_NAME, value: x.CUSTOMER_TYPE_CODE }));
    },

    searchCustomer(val) {
      const params = Object.assign({}, val, { xhrAbort: false });
      this.fetchParams = params;
    },
    // 重置
    FormPanelreset() {
      this.$refs.formPanel.RESET_FORM();
      this.emptyTableData = [];
    },
    // 查询
    FormPanelSeacher() {
      this.$refs.formPanel.SUBMIT_FORM();
    },

    // 选中
    selectChange(rows) {
      this.selectedRows = rows;
    }
  }
};
</script>
